<template>
<div style="display: inline-block;">
  <slot v-bind:on='toggle'>
    <v-btn
      v-bind="$attrs"
      color="indigo"
      outlined
      @click.stop="toggle"
      v-on="$listeners">
      选择产品
    </v-btn>
  </slot>
  <SearchSelect :show.sync="dialog" api="/admin/factordata/product/search" title="选择产品" @ok="handleOk" @on-page="handlePageChange">
    <template v-slot="{ queryParams, loading, tableData, search }">
      <v-card flat>
        <v-card-text class="py-0">
          <v-row>
            <v-col cols="3">
              <v-text-field
                v-model.trim="queryParams.keyword"
                :label="$t('placeholder.keyword')"
                outlined
                dense
                hide-details
                clearable
                @keyup.enter.native="search(1)"
              ></v-text-field>
            </v-col>
            <v-col>
              <v-btn color="info" class="mr-3" @click="search(1)">{{ $t('actions.search') }}</v-btn>
            </v-col>
          </v-row>
        </v-card-text>
      </v-card>
      <v-radio-group v-model="selection" hide-details>
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            align="center"
            prop="id"
            width="55">
            <template v-slot:default="{ row }">
              <v-radio :value="row"></v-radio>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="产品名称">
          </el-table-column>
          <el-table-column
            prop="info_type_name"
            label="产品类型">
          </el-table-column>
          <el-table-column
            prop="company_name"
            label="客户名称">
          </el-table-column>
        </el-table>
      </v-radio-group>
    </template>
  </SearchSelect>
</div>
</template>

<script>
import SearchSelect from '@/components/search-select'
export default {
  data() {
    return {
      selection: '',
      dialog: false
    }
  },
  methods: {
    toggle() {
      this.dialog = !this.dialog
    },
    handlePageChange() {
      this.selection = ''
    },
    handleOk() {
      if (!this.selection) {
        return this.$message.warning('请选择产品')
      }
      this.$emit('selection', this.selection)
      this.dialog = false
    }
  },
  components: {
    SearchSelect
  }
}
</script>

<style>

</style>